<template>
  <p-modal
    v-model="visible"
    :title="title"
    :body-style="{
      height: '590px',
    }"
    :width="1000"
    :mask-closable="false"
    :dialog-style="{ top: '40px' }"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="content-container">
      <div class="connect_div">
        <div class="form_one">
          <div class="input_div">
            <p-input
              v-model="form.opportunityNo"
              class="input"
              placeholder="请输入"
            />
            <span class="label">商机编号</span>
          </div>
          <div class="input_div">
            <p-input
              v-model="form.opportunityName"
              class="input"
              placeholder="请输入"
            />
            <span class="label">商机名称</span>
          </div>
          <div class="input_div">
            <SelectDefault
              v-model="form.stage"
              :has-default="false"
              code="business_stage_process_node"
              class="input"
              :allow-clear="false"
            />
            <span class="label">商机阶段</span>
          </div>
          <div class="input_div" />
        </div>
        <div class="form_one">
          <div class="input_div">
            <SelectOrg
              v-model="form.salesOrgCode"
              class="input"
              @input="handleOrgChange"
            />
            <span class="label">销售组织</span>
          </div>
          <div class="input_div">
            <SelectDefault
              v-model="form.appCategory"
              :has-default="false"
              code="application"
              class="input"
              :allow-clear="false"
            />
            <span class="label">应用别</span>
          </div>
          <div class="input_div">
            <p-input
              v-model="form.createUserName"
              class="input"
              placeholder="请输入"
            />
            <span class="label">创建人</span>
          </div>
          <div class="input_div">
            <p-button
              class="button"
              type="primary"
              style="height: 32px !important"
              @click="search"
            >
              搜索
            </p-button>
            <p-button
              class="button"
              style="height: 32px !important"
              @click="reset"
            >
              重置
            </p-button>
          </div>
        </div>
      </div>
      <p-table
        class="table-list-container"
        row-key="id"
        :columns="columns"
        bordered
        :scroll="{ x: 1400, y: 300 }"
        :data-source="opportunityDataSource"
        :pagination="paginationMixin"
        :row-selection="rowSelectionMixin"
        @change="handleTableChange"
      >
        <a
          slot="serialNumber"
          slot-scope="text, record"
          @click="$emit('number-click', record)"
        >
          {{ text }}
        </a>
      </p-table>
    </div>
  </p-modal>
</template>

<script>
import mixinTable from '@/mixins/mixin-table.js';
const defaultForm = {
  opportunityNo: '',
  opportunityName: '',
  stage: '',
  salesOrgCode: '',
  appCategory: '',
  createUserName: '',
};
export default {
  mixins: [mixinTable],
  props: {
    title: {
      type: String,
      default: '选择商机',
    },
    value: {
      type: [String, Number],
      default: undefined,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: 0,
    },
    opportunityDataSource: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      form: {
        ...defaultForm,
      },
      parentId: '',
    };
  },

  computed: {
    stateOptions() {
      return this.$store.state.dictionary.dict['business_status'] || {};
    },
    nodeOptions() {
      return (
        this.$store.state.dictionary.dict['business_stage_process_node'] || {}
      );
    },
    orgOptions() {
      return this.$store.getters.getOrg({
        code: 'ltcsmsizebu',
      });
    },
    applicationOptions() {
      return this.$store.state.dictionary.dict['application'] || {};
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '商机编号',
          dataIndex: 'opportunityNo',
        },
        {
          align: 'center',
          title: '商机名称',
          dataIndex: 'opportunityName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '商机状态',
          customRender: (text) => this.stateOptions[text],
          dataIndex: 'state',
        },
        {
          align: 'center',
          title: '商机阶段',
          customRender: (text) => this.nodeOptions[text],
          dataIndex: 'stage',
        },
        {
          align: 'center',
          title: '销售组织',
          dataIndex: 'salesOrgCode',
          customRender: (text) => this.orgOptions[text],
        },
        {
          align: 'center',
          title: '应用别',
          width: 150,
          customRender: (text) => this.applicationOptions[text],
          dataIndex: 'appCategory',
        },
        {
          align: 'center',
          title: '创建人',
          dataIndex: 'createUserName',
        },
        {
          align: 'center',
          title: '创建时间',
          width: 150,
          dataIndex: 'createTime',
        },
      ];
      return columns;
    },
  },

  created() {
    this.rowSelectionMixin.type = 'radio';
  },
  methods: {
    handleOrgChange(val) {
      this.form.salesGroup = '';
      this.parentId = val;
    },
    search() {
      this.$emit('opportunity-list');
    },
    handleCancel() {
      this.rowSelectionMixin.selectedRowKeys = [];
      this.form = { ...defaultForm };
      this.$emit('update:visible', false);
      this.$emit('cancel', false);
    },
    reset() {
      this.form = { ...defaultForm };
      this.$emit('opportunity-list');
    },
    handleOk() {
      const keys = this.rowSelectionMixin.selectedRowKeys;
      if (!keys.length) {
        this.$message.error('请选择商机！');
        return;
      }
      const current = this.opportunityDataSource.find(
        (item) => item.id === keys[0]
      );
      console.log('current: ', current);
      this.$emit(
        'change',
        { key: current.opportunityNo, label: current.opportunityName },
        this.index
      );
      this.handleCancel();
    },
  },
};
</script>

<style lang="less" scoped>
.content-container {
  // width: 100%;
  // display: flex;
  // align-items: center;
  // font-size: 20px;
  // .content {
  //   display: flex;
  //   justify-content: center;
  //   flex: 1;
  // }

  .table-list-container {
    margin-top: 20px;
  }

  .poros-form {
    padding: 10px 20px;
    width: 100%;
    border-bottom: 1px solid #e5e6e9;
  }
  .poros-form-item {
    width: 30%;
    margin-bottom: 10px;
  }
  /deep/ .poros-form-item-control-wrapper {
    width: calc(100% - 70px);
  }
  .btn-search {
    margin-right: 16px;
  }
}
.connect_div {
  width: 100%;
  background-color: #f7f7f8;
  height: 90px;
  margin-bottom: 20px;
}

.form_one {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: space-around;
}
.input_div {
  width: 30% !important;
  line-height: 30px;
  margin-top: 7.5px;
}
.input {
  width: 60% !important;
  float: right;
}
.label {
  float: right;
  margin-right: 10px;
}
.button {
  margin-left: 10px;
}
</style>
